import React, { FC, createElement } from 'react';
import { Radio, Space, Tag } from 'antd';
import { getColor } from '../../checkbox-group/utils';

export interface IBaseFieldRadioProps {}

export const BaseFieldRadio: FC<IBaseFieldRadioProps> = (props) => {
  const { columnConfig, style, className, value, onChange, innerProps } = props;

  let direction = 'horizontal';
  if (columnConfig) {
    direction = columnConfig.direction == 'horizontal' ? 'horizontal' : 'vertical';
  }
  return (
    <Radio.Group
      style={style}
      className={className}
      {...innerProps}
      onChange={onChange}
      value={value || columnConfig?.defaultValue}
    >
      <Space direction={direction} wrap>
        {columnConfig?.options?.map((item) => (
          <Radio value={item.value} key={item.value}>
            {columnConfig.hasColor ? (
              <Tag color={getColor(item.color!)}>{item.label}</Tag>
            ) : (
              item.label
            )}
          </Radio>
        ))}
      </Space>
    </Radio.Group>
  );
};
